import react from "react"
import Swiper,{Autoplay} from 'swiper'
import Image from "next/image";
import img1 from "../../public/carousel01.png"
import img2 from "../../public/carousel02.png"
import img3 from "../../public/carousel03.png"
import img4 from "../../public/carousel04.png"
import img5 from "../../public/carousel05.png"
class IndexLun extends react.Component<any, any>{
    componentDidMount(){
        let slideW = 300;//一张图300px, 每面四张角度22.5（PI/8），中心角度PI/16
        const radius = slideW*0.5/Math.sin(Math.PI/16);//半径。圆心并不是视点中心，视点在1200px

        new Swiper('#carousel .swiper', {
            observer: true,
            observeSlideChildren: true,
            observeParents: true,  //这三个可以去文档看下介绍，主要就是异步情况会重新加载swiper。
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            centeredSlides: false,
            loop: true,
            loopedSlides: 4,
            grabCursor:true,
            speed:5000,

            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                //clickable :true,
            },
            on: {
                progress: function(swiper, progress) {
                    let translateX;
                    let rotateY;
                    let translateZ;
                    // @ts-ignore
                    for (let i = 0; i < this.slides.length; i++) {
                        // @ts-ignore
                        var slide = this.slides.eq(i);
                        // @ts-ignore
                        var slideProgress = this.slides[i].progress;
                        translateX = (slideProgress + 1.5) * (slideW / 3 - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * slideW * 1.1 / 3) + 'px';//调整图片间距，根据图片宽度改变数值实现自适应
                        rotateY = (slideProgress + 1.5) * 22.5;//图片角度
                        translateZ = (radius - Math.cos((slideProgress + 1.5) * 0.125 * Math.PI) * radius - 150) + 'px';//调整图片远近，刚好4个在画框内
                        slide.transform('translateX(' + translateX + ') translateZ(' + translateZ + ') rotateY(' + rotateY + 'deg)');

                    }
                },
                setTransition: function(swiper, transition) {
                    // @ts-ignore
                    for (var i = 0; i < this.slides.length; i++) {
                        // @ts-ignore
                        var slide = this.slides.eq(i)
                        slide.transition(transition);
                    }

                }
            }

        });
    }
    render() {
        return (
            <div id="carousel">

                <div className="swiper swiper-3d">
                <div className="swiper-wrapper">
                    <div className="swiper-slide"><Image src={img1} priority={true}/><p>北京冬奥会迎来倒计时一个月</p></div>
                    <div className="swiper-slide"><Image src={img2} priority={true}/><p>北京冬奥会迎来倒计时一个月</p></div>
                    <div className="swiper-slide"><Image src={img3} priority={true}/><p>北京冬奥会迎来倒计时一个月</p></div>
                    <div className="swiper-slide"><Image src={img4} priority={true}/><p>北京冬奥会迎来倒计时一个月</p></div>
                    <div className="swiper-slide"><Image src={img5} priority={true}/><p>北京冬奥会迎来倒计时一个月</p></div>

                </div>
            </div>

            </div>

        )
    }
}

export default IndexLun
